<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.thymeleaf.org"
      layout:decorator="layout/master" >

<body layout:fragment="content">
<link rel="stylesheet" type="text/css" href="/css/zy_main.css">
<input type="hidden" id="optId" th:value="${req.optId}">
<input type="hidden" id="listId" th:value="${listId}">
<input type="hidden" id="sortType" th:value="${req.sortType}">
<input type="hidden" id="showType" th:value="${req.showType}">
<script src="/ajax/load.js"></script>
    <header class="zy_search_top_box">
        <div class="zy_search_top fix">
            <div class="one" href="javascript:" onclick="history.back();"><img src="/images/back_jt.png"></div>
            <div class="box">
                <span><img src="/images/icon_search.png"/></span>
                <input type="text" placeholder="零食点心" value="零食点心" />
            </div>
            <div class="r shaix">
                <span>筛选</span>
            </div>
        </div>
    </header>
    <script type="text/javascript">
        $(function(){
            $(".zy_search_top .shaix").mousedown(
                function(){
                    $(".zy_shaixuanbox").show()
                    $(".zy_search_top_box").hide()
                    $(".zy_module-content").hide()
                }
            )
            $(".zy_shaixuanbox .one").mousedown(
                function(){
                    $(".zy_shaixuanbox").hide()
                    $(".zy_search_top_box").show()
                    $(".zy_module-content").show()
                }
            )

            var h1=$(".zy_search_top_box").height();
            var h2=$(".zy_rank_box").innerHeight();

            $(window).scroll(function(){
                var s = $(document).scrollTop();
                if (s>h1) {
                    $(".zy_rank_box").addClass('scroll_fix')
                    $(".zy_gzttc_box").css("padding-top",h2)
                }else{
                    $(".zy_rank_box").removeClass('scroll_fix')
                    $(".zy_gzttc_box").css("padding-top",0)
                }
            });
        })
    </script>
    <!-- 筛选框 -->
    <div class="zy_shaixuanbox">
        <div class="zy_title_top zy_shaix_box fix">
            <div class="one"><img src="/images/back_jt.png"></div>
            <h1>筛选</h1>
        </div>
        <div class="sx_con">
            <form>
                <div class="conbox">
                    <h2>类别</h2>
                    <select>
                        <option>酸奶</option>
                        <option>原味</option>
                        <option>草莓</option>
                    </select>
                </div>
                <div class="conbox">
                    <h2>品牌</h2>
                    <select>
                        <option>不限</option>
                        <option>三鹿</option>
                        <option>蒙牛</option>
                    </select>
                </div>
                <div class="conbox price">
                    <h2>价格</h2>
                    <label><input type="text" name="" value="100">~<input type="text" name="" value="400">元</label>
                </div>
                <div class="btn">
                    <button class="quex">取消</button>
                    <button>完成</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 内容框 -->
    <div class="zy_module-content">
        <div class="zy_gzttc_box">
            <div class="zy_rank_box">
                <ul th:utext="${getSort}">
                </ul>
                <script type="text/javascript">
                    $(function(){
                        $(".zy_rank_box .price").click(
                            function(){
                                if ($(".zy_rank_box .price span i:first").hasClass("on")) {
                                    $(".zy_rank_box .price span i:first").removeClass("on")
                                    $(".zy_rank_box .price span i:first").siblings().addClass("on")
                                }else{
                                    $(".zy_rank_box .price span i:first").siblings().removeClass("on")
                                    $(".zy_rank_box .price span i:first").addClass("on")
                                }
                            }
                        )
                    })
                </script>
            </div>
            <div th:class="${listDataClass}" id="main">
                <ul class="_picbox_w_h" th:utext="${getListData}" id="list_box">
                </ul>
<!--                <ul class="_picbox_w_h" id="list_box">-->
<!--                </ul>-->
                <div class="zy_more">
                    <h2>上拉加载更多</h2>
                </div>
            </div>

        </div>
        <!-- 底部 -->
        <div th:replace="layout/layout::footer_box"></div>

        <!-- 返回顶部 -->
        <div class="go_top">
            <a class="btn_top"></a>
        </div>
        <!-- 底部导航 -->
        <div th:replace="layout/layout::foot_menu"></div>

    </div>

    <!-- 搜索框 -->
    <div class="search_bomb_box zy_search_bomb_box">
        <div class="search_top fix">
            <a><img src="/images/back_jt.png"></a>
            <form method="get" action="/product/list">
                <div>
                    <span><img src="/images/icon_search.png"></span>
                    <input type="text" name="keyword" placeholder="零食点心">
                </div>
                <button type="submit">搜索</button>
            </form>
        </div>
        <div th:replace="layout/layout::hot_search"></div>
    </div>
    <script type="text/javascript">
        $(function(){
            $(".zy_search_top .box").mousedown(
                function(){
                    $(".search_bomb_box").show()
                    $(".zy_search_top_box").hide()
                    $(".zy_module-content").hide()
                }
            )
            $(".search_bomb_box .search_top>a").mousedown(
                function(){
                    $(".search_bomb_box").hide()
                    $(".zy_search_top_box").show()
                    $(".zy_module-content").show()
                }
            )
        })
    </script>
</body>
</html>